<div data-page="statusbar" class="page">
    <!-- Top Navbar-->
    <div class="navbar">
        <div class="navbar-inner">
            <div class="left">
                <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
            </div>
            <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
            <div class="center">StatusBar</div>
        </div>
    </div>
    <!-- Scrollable page content -->
    <div class="page-content">
        <div class="content-block">
            <blockquote>The StatusBar object provides some functions to customize the iOS and Android StatusBar.
            </blockquote>
        </div>
        <div class="content-block-title">Change StatusBar Color</div>
        <div class="content-block">
            <div class="content-block-inner">
                <p class="buttons-row">
                    <a href="#" class="button button-fill color-red" data-color="#f44336">Red</a>
                    <a href="#" class="button button-fill color-green" data-color="#4caf50">Green</a>
                    <a href="#" class="button button-fill color-blue" data-color="#2196f3">Blue</a>
                </p>
                <p class="buttons-row">
                    <a href="#" class="button button-fill color-orange" data-color="#ff9800">Orange</a>
                    <a href="#" class="button button-fill color-pink" data-color="#e91e63">Pink</a>
                    <a href="#" class="button button-fill color-purple" data-color="#9c27b0">Purple</a>
                </p>
                <p class="buttons-row">
                    <a href="#" class="button button-fill color-cyan" data-color="#00bcd4">Cyan</a>
                    <a href="#" class="button button-fill color-teal" data-color="#009688">Teal</a>
                    <a href="#" class="button button-fill color-indigo" data-color="#3f51b5">Indigo</a>
                </p>
            </div>
        </div>
        <div class="content-block-title">Show/Hide StatusBar</div>
        <div class="content-block">
            <div class="content-block-inner">
                <p class="buttons-row">
                    <a href="#" class="button button-raised button-fill btn-show">Show</a>
                    <a href="#" class="button button-raised button-fill btn-hide">Hide</a>
                </p>
            </div>
        </div>
    </div>
</div>